<template>
  <div>
    <Header :isGoBack="false" :width="1000" v-if="isShow">
      <template v-slot:right>
        <div class="btn" @click="goTestCenter">返回测试中心</div>
      </template>
    </Header>
    <div class="" :class="[isShow ? 'w1000' : '',isShow ? 'test-record' : '']">
      <div class="" :class="[isShow ?'word-book-container' : '']">
        <div class="word-book-header mb20" v-if="isShow">
          {{ checkedBookData.edition_name }}-{{ checkedBookData.grade_name }}
        </div>
        <div class="word-book-header" style="margin-top: 20px;font-size: 18px;border: none;" v-else>
          2.同步句子
        </div>
        <div class="unit-select common-select">
          <span>选择模块: </span>
          <el-select v-model="checkCategory" placeholder="请选择" @change="categroyChange">
            <el-option :label="'全部'" :value="null"> </el-option>
            <el-option v-for="item in categoryOption" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <span class="ml30">测试类型: </span>
          <el-select v-model="checkType" placeholder="请选择" @change="categroyChange">
            <el-option :label="'全部'" :value="null"> </el-option>
            <el-option v-for="item in typeOption" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="common-table common-pagination">
          <el-table border :data="tableData" style="width: 100%">
            <el-table-column type="index" label="序号" width="100" :index="indexMethod">
            </el-table-column>
            <el-table-column prop="category" label="测试类型" width="180">
              <template slot-scope="scope">
                <div>
                  {{ getCategoryName(scope.row.category) }} -
                  {{ getTypeName(scope.row) }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="unit_name" label="测试单元"></el-table-column>
            <el-table-column prop="start_time" label="测试时间"></el-table-column>
            <el-table-column prop="test_time" label="耗时">
            </el-table-column>
            <el-table-column prop="score" label="得分"> </el-table-column>
            <el-table-column prop="score" label="说明">
              <template slot-scope="scope">
                <div>
                  <span v-if="scope.row.score >= 0 && scope.row.score <= 14">很遗憾 你仅到达了黑铁段位
                  </span>
                  <span v-if="scope.row.score > 14 && scope.row.score <= 28">很遗憾 你仅到达了青铜段位
                  </span>
                  <span v-if="scope.row.score > 28 && scope.row.score <= 42">很遗憾 你仅到达了白银段位
                  </span>
                  <span v-if="scope.row.score > 42 && scope.row.score <= 56">恭喜你 你的段位在黄金段位
                  </span>
                  <span v-if="scope.row.score > 56 && scope.row.score <= 85">恭喜你 你的段位在钻石段位
                  </span>
                  <span v-if="scope.row.score > 85 && scope.row.score <= 90">
                    恭喜你 你的段位在大师段位
                  </span>
                  <span v-if="scope.row.score > 90 && scope.row.score <= 100">
                    太棒了 你到达了王者段位
                  </span>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination @current-change="handleCurrentChange" v-if="paperData.total_page > 1 && showPagination"
            class="fr" background :page-size="paperParams.pageSize" layout="prev, pager, next"
            :total="paperData.total_num">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Header from "@/components/Header";
import { getPaperList, getUnitList } from "@/api/sentence";
export default {
  data() {
    return {
      checkCategory: null,
      checkType: null,
      tableData: [],
      paperParams: {
        pageNum: 1,
        pageSize: 10,
      },
      paperData: {
        page_num: 0,
      },
      bookId: null,
      unitId: null,
      unitList: [],
      showPagination: true,
      categoryOption: [
        {
          value: 0,
          label: "听音组句",
        },
        {
          value: 1,
          label: "听力理解",
        },
        {
          value: 2,
          label: "连词成句",
        },
        {
          value: 3,
          label: "句子默写",
        },
      ],

      typeOption: [
        {
          value: 1,
          label: "今日已学测试",
        },
        {
          value: 2,
          label: "已学测试",
        },
        {
          value: 3,
          label: "生句测试",
        },
        {
          value: 4,
          label: "熟句测试",
        },
        {
          value: 5,
          label: "极速挑战",
        },
      ],
    };
  },
  props: {
    isShow: {
      type: Boolean,
      default: true
    },
    parentCheckedBookData:{
      type:Object
    }
  },
  watch:{
    parentCheckedBookData(nv){
      this.checkedBookData=nv
      this.getPaperList();
    }
  },
  components: {
    Header,
  },
  methods: {
    getCategoryName(category) {
      let data = this.categoryOption.filter((item) => {
        return category == item.value;
      });
      if (data.length > 0) {
        return data[0].label;
      }
      return "";
    },
    getTypeName(data) {
      let type = null;
      if (data.classify) {
        type = data.classify;
      }
      if (!data.classify && data.mode == 1) {
        type = 5;
      }
      let typeData = this.typeOption.filter((item) => {
        return type == item.value;
      });
      if (typeData.length > 0) {
        return typeData[0].label;
      }
      return "";
    },
    getUnitList() {
      let params = {
        bookId: this.checkedBookData.book_id,
      };
      getUnitList(params).then((res) => {
        if (res.code == 200 && res.data) {
          this.unitList = res.data;
        }
      });
    },
    indexMethod(index) {
      return (
        (this.paperData.page_num - 1) * this.paperParams.pageSize + index + 1
      );
    },
    goTestCenter() {
      this.$router.push({
        name: "sentenceTestCenter",
      });
    },
    getPaperList() {
      let params = {
        pageNum: this.paperParams.pageNum,
        pageSize: this.paperParams.pageSize,
      };
      let data = {
        category: this.checkCategory,
        classify: this.checkType,
        book_id: this.checkedBookData.book_id,
      };
      getPaperList(params, data).then((res) => {
        if (res.code == 200 && res.data) {
          this.paperData = res.data;
          this.tableData = res.data.list;
          this.paperData.page_num = this.paperParams.pageNum;
        }
      });
    },
    handleCurrentChange(value) {
      this.paperParams.pageNum = value;
      this.getPaperList();
    },
    categroyChange() {
      this.showPagination = false;
      this.paperParams.pageNum = 1;
      this.$nextTick(() => {
        this.showPagination = true;
      });
      this.getPaperList();
    },
  },
  created() {
    this.checkedBookData = JSON.parse(localStorage.getItem("bookData"));
    this.getPaperList();
  },
};
</script>